@import "@/assets/css/base.scss";

.recommend-box {
    background-color: $Color_F5F5F5;
    margin-bottom: 80px;

    // 轮播图
    .recommend-slideshow {
        height: $HeightSlideshow;

        .van-swipe {
            height: 100%;

            img {
                width: 100%;
                height: 100%;
            }

            .van-swipe__indicators {
                i {
                    width: 10px;
                    height: 10px;
                }
            }
        }
    }

    // 分类标签
    .recommend-classify {
        background-color: $Color_fff;

        .classify-ul {
            display: flex;
            flex-wrap: wrap;

            .item-li {
                width: 20%;
                margin: 20px 0;

                .item-img {
                    width: 100%;
                    height: 80px;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }

                .item-span {
                    font-size: $FontSize20;
                    text-align: center;
                }
            }
        }
    }

    // 商城早报
    .recommend-storeNews {
        background-color: $Color_fff;
        border-top: 1px solid #E3E3E3;
        padding: 0 20px;
        padding-top: 10px;
        display: flex;
        height: 75px;

        .title {
            background-color: $Color_fff;
            width: 20%;
            height: 60px;
            color: $Color_F25C2C;
            font-size: $FontSize25;
            line-height: 60px;
            text-align: center;
            position: relative;

            &::after {
                content: "";
                z-index: 2;
                position: absolute;
                right: -10px;
                top: 10px;
                width: 2px;
                height: 50px;
                background-color: #CDCDCD;
            }
        }

        .content {
            width: 70%;

            .content-ul {
                height: 60px;

                .van-swipe__track {
                    .item-li {
                        height: 100%;
                        font-size: $FontSize25;
                        padding-left: 40px;
                        line-height: 60px;
                        color: #000000;
                        background-color: $Color_fff;
                    }
                }

            }
        }
    }

    // 商城下面的图片
    .recommend-storeNewsImages {
        .img-left {
            float: left;
            width: 49%;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .img-right {
            float: right;
            width: 49%;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .img-bottom {
            height: 300px;
            float: left;

            img {
                width: 100%;
                height: 100%;
            }
        }
    }

    // 秒杀
    .recommend-miaosha {
        margin-top: 10px;
        background-color: $Color_fff;
        overflow: hidden;

        // 头部
        .title {
            height: 50px;
            line-height: 50px;
            margin-top: 10px;
            position: relative;

            h2 {
                color: $Color_F25C2C;
                padding: 0 $FontSize20;
                font-size: $FontSize30;
                font-weight: 600
            }

            .time {
                position: absolute;
                right: 20px;
                top: 0;
                display: flex;

                .time-title {
                    color: #000000;
                    font-size: $FontSize25;
                    margin-right: 10px;
                }

                .time-countdown {
                    font-size: $FontSize25;

                    span {
                        background-color: #5B5B5B;
                        padding: 0 5px;
                        margin: 0 2px;
                        color: $Color_fff;
                        border-radius: 3px;
                    }
                }
            }
        }

        // 商品
        .store {
            width: 100%;
            padding-left: 20px;
            height: 300px;
            position: relative;
            &::-webkit-scrollbar {
                display: none;
            }
            .store-content {
                height: 100%;
                position: absolute;
                display: flex;
                .store-box {
                    flex-shrink: 0;
                    width: 220px;
                    margin-right: 10px;
                    .item-img {
                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .item-price {
                        text-align: center;

                        .price-new {
                            color: $Color_F25C2C;
                            font-size: $FontSize30;
                            margin-right: 10px;
                        }

                        .price-old {
                            text-decoration: line-through;
                            font-size: $FontSize20
                        }
                    }
                }
            }

        }
        
    }
    // 下面图片
    .recommend-image-box {
        margin-top: 10px;
        height: 300px;
        width: 100%;

        img {
            width: 100%;
            height: 100%;
        }
    }
    // 小米众筹
    .recommend-zhonchou {
        background-color: $Color_fff;
        .title {
            height: 50px;
            line-height: 50px;
            margin-top: 10px;
            position: relative;
            h2 {
                color: #5B5B5B;
                padding: 0 $FontSize20;
                font-size: $FontSize30;
                font-weight: 600
            }
        }
        .more {
            position: absolute;
            right: 20px;
            top: 0;
            span {
                font-size: $FontSize25;
                color: #B3B3B3;
                margin-right: 10px;
            }
            i {
                font-size: $FontSize25;
                vertical-align: middle;
            }
        }
    }
}